<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
<div>
    <input type="file" id="file">
    <input type="button" value="提交" onclick="uploadFile();">
    <div id="result"></div>
</div>
<!--Ajax-->
<div>
    多文件上传
</div>
<div>
    <input type="file" id="file_ajax" multiple>
    <input type="button" value="提交" onclick="uploadFileAjax();">
    <div id="result_ajax"></div>
</div>
</body>
</html>

<script>
    function uploadFile() {
        var file = $("#file")[0].files[0];
        var formData = new FormData();
        formData.append("file", file);
        $.ajax({
            url: '/upload/upload',
            data: formData,
            type: 'post',
            processData: false,
            contentType: false,
            success: function (msg) {
                $('#result').html(msg);
            }
        });
    }

    function uploadFileAjax() {
        //上传文件的数量
        var filesNum = $("#file_ajax")[0].files.length;
        var formData = new FormData();
        for (i = 0; i < filesNum; i++) {
            formData.append("files", $("#file_ajax")[0].files[i]);
        }
        $.ajax({
            url: '/upload/uploads',
            data: formData,
            type: 'post',
            processData: false,
            contentType: false,
            success: function (msg) {
                $('#result_ajax').html(msg);
            }
        });

    }

</script>